<template>
  <div 
    :class="['CourseItem', day, jc]" 
    :style="{'background-color':randomColor}"
    >
    <div class="simple-info" @click="dialogVisible = true">
      <!-- 名称 -->
      <div class="course_name item">{{info.kcmc}}</div>
      <div class="course_addr item">{{'@' + info.cdmc}}</div>
    </div>
    <el-dialog
      title="课程详情"
      :visible.sync="dialogVisible"
      :modal-append-to-body='false'
      width="30%">
      <div class="detail"><span>课程名称：</span>{{info.kcmc}}</div>
      <div class="detail"><span>上课地点：</span>{{info.cdmc}}</div>
      <div class="detail"><span>节次：</span>{{info.jcor}}</div>
      <div class="detail"><span>考核方式：</span>{{info.khfsmc}}</div>
      <div class="detail"><span>课程学分：</span>{{info.xf}}</div>
      <div class="detail"><span>教师姓名：</span>{{info.xm}}</div>
      <div class="detail"><span>上课周数：</span>{{info.zcd}}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'CourseItem',
    data() {
      return {
        letters: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'],
        dialogVisible: false
      }
    },
    props: {
      info: {
        type: Object,
        default() {
          return {
            // 上课地点
            cdmc: '',
            // 节次
            jcor: '',
            // 课名
            kcmc: '',
            // 考核方式
            khfsmc: '',
            // 学分
            xf: '',
            // 教师姓名
            xm: '',
            // 星期几上课
            xqj: '',
            // 上课周数
            zcd: ''
          }
        }
      }
    },
    methods: {
      // 数字前面补零，num传入的数字，n需要的字符长度
      prefixInteger(num, n) {
          return (Array(n).join(0) + num).slice(-n);
      }
    },
    computed: {
      jc() {
        // 节次
        let tmps = this.info.jcor.split('-')
        if(tmps[0] === tmps[1]) {
          return '_' + tmps[0]
        }
        return '_' + tmps[0] + tmps[1]
      },
      day() {
        // 星期几
        return '_' + this.info.xqj
      },
      randomColor() {
        // 获取随机颜色
        let r1 = Math.floor(Math.random() * 11) + 4
        r1 = this.letters[r1]
        let r2 = Math.floor(Math.random() * 11) + 4
        r2 = this.letters[r2]
        let g1 = Math.floor(Math.random() * 11) + 4
        g1 = this.letters[g1]
        let g2 = Math.floor(Math.random() * 11) + 4
        g2 = this.letters[g2]
        let b1 = Math.floor(Math.random() * 11) + 4
        b1 = this.letters[b1]
        let b2 = Math.floor(Math.random() * 11) + 4
        b2 = this.letters[b2]
        return '#' + r1 + r2 + g1 + g2 + b1 + b2
      }
    }
  }
</script>

<style scoped>
  .CourseItem {
    background-color: blue;
    border-radius: 6px;
    color: white;
    margin: 5px 5px;
    font-size: 14px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 3px 3px 5px rgba(100, 100, 100, 0.3);
  }

  .CourseItem .simple-info {
    font-size: 14px;
    
  }

  .item {
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    overflow: hidden;
    -webkit-box-orient: vertical;
    cursor: pointer;
    text-shadow: 2px 2px 10px rgba(50, 50, 50, 0.5);
  }

  .detail {
    margin: 5px;
    font-size: 16px;
    text-align: left;
  }

  .detail span {
    font-weight: 600;
    color: lightseagreen;
  }
</style>